<script setup>
import { ref, watch ,defineProps} from 'vue'
import { useRouter, useRoute } from 'vue-router'
import lang from './lang.vue'
import { useI18n } from 'vue-i18n'
import avatar from '@/static/icon/public/avatar.png'
defineProps({
  theme: {
    type: String,
    default: 'light' //'dark' // light
  }
})
const { t } = useI18n()
const show = ref(false)
const togglePopup = () => {
  show.value = !show.value
}
const route = useRoute()
const router = useRouter()
let langRef = ref(null)
let handleLanguge = () => {
  langRef.value.open()
}

let navList = ref([
  {
    label: t('home'),
    path: '/index'
  },
  {
    label: t('lever'),
    path: '/lever'
  },
  {
    label: t('lending'),
    path: '/lending'
  },
  {
    label: t('finance'),
    path: '/finance'
  },
  {
    label: t('project'),
    path: '/project'
  }
])

const handleClick = (item) => {
  if (route.path !== item.path) {
    router.push({ path: item.path })
  }
  togglePopup()
}

watch(
  () => t('home'),
  () => {
    navList.value = [
      {
        label: t('home'),
        path: '/index'
      },
      {
        label: t('lever'),
        path: '/lever'
      },
      {
        label: t('lending'),
        path: '/lending'
      },
      {
        label: t('finance'),
        path: '/finance'
      },
      {
        label: t('project'),
        path: '/project'
      }
    ]
  }
)
</script>
<template>
  <nav :style="{ backgroundColor: theme === 'dark' ? '#191D1C' : '#FFFFFF' }">
    <div class="header_wallet">
      <van-image width="38" height="38" :src="avatar" />
    </div>
    <div class="header_right">
      <div class="language_icon" @click="handleLanguge">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48" fill="none">
          <path
            d="M13.4454 22.5714C13.517 19.6429 13.8032 16.8571 14.2326 14.3571C12.3005 13.5 10.4401 12.3571 8.72272 11C6.07513 14.1429 4.28623 18.1429 4 22.5714H13.4454ZM23.9642 13.5C26.1825 13.5 28.3292 13.1429 30.3327 12.5C29.4025 8.64286 28.0429 5.71429 26.5402 4.14286C25.6816 4.07143 24.8229 4 23.9642 4C23.1055 4 22.2469 4.07143 21.3882 4.14286C19.8855 5.71429 18.5259 8.64286 17.5957 12.5C19.5993 13.1429 21.746 13.5 23.9642 13.5ZM13.4454 25.4286H4C4.28623 29.8571 6.07513 33.8571 8.79428 37C10.5116 35.6429 12.3005 34.5 14.3041 33.6429C13.8032 31.1429 13.517 28.3571 13.4454 25.4286ZM34.483 25.4286C34.4114 28.3571 34.1252 31.1429 33.6959 33.6429C35.6279 34.5 37.4884 35.6429 39.2057 37C41.9249 33.8571 43.6422 29.8571 44 25.4286H34.483ZM23.9642 34.5C21.746 34.5 19.5993 34.8571 17.5957 35.5C18.5259 39.3571 19.8855 42.2857 21.3882 43.8571C22.2469 44 23.1055 44 23.9642 44C24.8229 44 25.6816 43.9286 26.5402 43.8571C28.0429 42.2857 29.4025 39.3571 30.3327 35.5C28.3292 34.8571 26.1825 34.5 23.9642 34.5ZM30.9052 15.3571C28.6869 16 26.3256 16.3571 23.9642 16.3571C21.6029 16.3571 19.2415 16 17.0233 15.3571C16.6655 17.5714 16.3792 20 16.3792 22.5714H31.6208C31.5492 20 31.263 17.5714 30.9052 15.3571ZM14.8766 36.5C13.4454 37.2143 12.0859 38.0714 10.7979 39.0714C12.6583 40.7143 14.8766 42 17.2379 42.8571C16.3077 41.0714 15.5206 38.9286 14.8766 36.5ZM33.0519 36.5C32.4079 38.9286 31.6208 41.0714 30.6905 42.8571C33.1234 42 35.2701 40.7143 37.1306 39.0714C35.8426 38.0714 34.483 37.2143 33.0519 36.5ZM33.6959 14.3571C34.1252 16.8571 34.4114 19.6429 34.483 22.5714H43.9284C43.6422 18.1429 41.8533 14.1429 39.1342 11C37.4884 12.3571 35.6279 13.5 33.6959 14.3571ZM14.8766 11.5C15.5206 9.07143 16.3077 6.92857 17.2379 5.14286C14.805 6 12.6583 7.28571 10.7979 8.92857C12.0859 9.92857 13.4454 10.7857 14.8766 11.5ZM37.1306 8.92857C35.2701 7.28571 33.0519 6 30.6905 5.14286C31.6208 6.92857 32.4794 9 33.0519 11.5C34.483 10.7857 35.8426 9.92857 37.1306 8.92857ZM17.0233 32.6429C19.2415 32 21.6029 31.6429 23.9642 31.6429C26.3256 31.6429 28.6869 32 30.9052 32.6429C31.263 30.4286 31.5492 28 31.5492 25.4286H16.3077C16.3792 28 16.6655 30.4286 17.0233 32.6429Z"
            fill="white" />
        </svg>
      </div>
      <div class="nav_btn nam_btn--icon">
        <appkit-button />
      </div>
    </div>
  </nav>
  <lang ref="langRef" />
  <!-- <van-popup v-model:show="show" z-index="9" :overlay="false" position="left">
    <div class="nav_body">
      <div class="nav_list">
        <div class="nav_list_item" v-for="item in navList" :key="item.label" @click="handleClick(item)">
          <div class="nav_list_item--label">{{ item.label }}</div>
          <div class="nav_list_item--icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" fill="none">
              <path d="M18.1826 16L8 6.66625L10.9087 4L24 16L10.9087 28L8 25.3338L18.1826 16Z" fill="#9DABC4" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </van-popup> -->
</template>

<style scoped lang="scss">
nav {
  padding: 14px;
  background-color: #191D1C;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 99;
}

.header_right {
  display: flex;
  align-items: center;
}

.nav_btn {
  margin-left: 16px;
}

.nav_body {
  width: 100vw;
  height: 100vh;
  margin-top: auto;
  background: radial-gradient(89.43% 47.97% at 50.13% 100%, #3e509c 0%, #03002c 62.5%);
  padding-top: calc(var(--van-nav-bar-height) + 35px);
}

.nav_list {
  box-sizing: border-box;

  .nav_list_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px 20px;

    .nav_list_item--label {
      color: #fff;
      font-family: 'Source Han Sans CN';
      font-size: 18px;
      font-weight: 500;
    }

    .nav_list_item--icon {
      margin-left: 10px;
      margin-top: -10px;
    }
  }
}
</style>
